/**
 * @Title: tab4.js
 * @Description: tab3
 * @author: Fanchao
 * @date: 2021/2/5 10:26 上午
 * @version V1.0
 */
import React, { useEffect } from 'react';
import { setConditionIsValid } from 'api/index';
import { Button, message, Switch, Table } from 'antd';
import styles from '@/pages/teaching-quality/compute-scheme/index.less';
import SectionTitle from 'components/SectionTitle';
import { connect } from 'umi';
import Modal4 from '@/pages/teaching-quality/compute-scheme/components/Modal4';

const Tab4 = ({ computeScheme: { tab4List }, dispatch, loading }) => {
    useEffect(() => {
        dispatch({
            type: 'computeScheme/getTab4List',
        });
    }, []);
    const updateItem = item => {
        dispatch({
            type: 'computeScheme/setTab4Show',
            payload: true,
        });
        dispatch({
            type: 'computeScheme/setItem4Data',
            payload: item,
        });
    };

    const handleClickUpdateState = async (item) => {
        const params = JSON.parse(JSON.stringify(item));
        params.valid = !item.valid;
        const result = await setConditionIsValid(params);
        if (result.status === 'success') {
            dispatch({
                type: 'computeScheme/getTab4List',
            });
        } else {
            message.error(result.message);
        }
    };
    const columns = [
        {
            title: '确定条件',
            align: 'left',
            render: item => `${item.passResultCondition}`,
        },
        {
            title: '条件数值',
            align: 'left',
            render: item => `${item.conditionValue}`,
        },
        {
            title: '是否启用',
            align: 'left',
            render: item => <Switch onClick={() => handleClickUpdateState(item)} checkedChildren="开启"
                                    unCheckedChildren="关闭" checked={item.valid}/>,
        },
        {
            title: '操作',
            align: 'left',
            render: (item) => {
                return (
                    <div>
                        <Button style={{ padding: 2, fontWeight: 'bold' }} type="link"
                                onClick={() => updateItem(item)}>修改</Button>
                    </div>
                );
            },
        },
    ];
    return (
        <div className={styles.pageContainerTable}>
            <SectionTitle title={'已有合格等级确定条件设置'}/>
            <div className={styles.tableContainer}>
                <Table
                    bordered={false} // 是否有边框
                    rowKey={'passResultConditionId'} // 唯一key值
                    loading={loading} // 加载动画
                    columns={columns} // 表头
                    dataSource={tab4List}
                    pagination={false}
                />
            </div>
            <Modal4/>
        </div>
    );
};

export default connect(({ computeScheme, dispatch, loading }) => ({
    computeScheme,
    dispatch,
    loading: loading.effects['computeScheme/getTab4List'],
}))(Tab4);
